.progress {
	text-align: right;
	margin-right: 8px;
}

.progressIcon {
	margin: 0 6px 0 0;
}

.progressInfo {
	color: white !important;
	background-color: #3C71B3 !important;
}

/* More prominent hyperlinks in notification area */
.progressInfo a {
	text-decoration: underline;
}

.progressWarning {
	color: black !important;
	background-color: #efc100 !important;
	border: 1px solid #efc100 !important;
}

.progressError {
	color: white !important;
	background-color: #e0182d !important;
	border: 1px solid #e0182d !important;
}

.progressNormal {
	color: white !important;
	background-color: #458500 !important;
	border: 1px solid #458500 !important;
}

.progressPane {
	vertical-align: middle;
	margin-right: 24px;
	background-position: 0 0;
	text-align: right;
	border: 0;
	width: 16px;
	height: 16px;
}

.progressWatchWrapper {
	width: 16px;
	height: 16px;
	margin: 3px;
}

.progressWatch {
	cursor: pointer;
	text-align: center;
	position: relative;
	display: inline-block;
	background: transparent;
	border: none;
	margin-top: -2px;
	margin-right: 6px;
	margin-left: 12px;
	padding: 1px;
	flex: 0 0 auto;
	-ms-flex: 0 0 auto;
	-webkit-flex: 0 0 auto;
}

.watchButton {
	border-top: 1px solid #626e76;
	position: relative;
	top: 0;
	width: 3px;
	left: calc(50% - 2px);
	height: 0px;
	border-radius: 40%;
	transition: top 0.5s ease, border-color 1s ease;
}

.watchBody {
	position: relative;
	left: 1px;
	top: 1px;
	width: calc(100% - 5px); /* subtract borders and button height */
	height: calc(100% - 5px); /* subtract borders, button height and space between button and body */
	background: transparent;
	border: 1px solid #626e76;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	
	transition: border-color 1s ease;
}

.watchBody span.hand {
	position: absolute;
	border-radius: 40%;
}

.watchBody .hand.longMinute {
	top: 1px;
	left: 5px;
	position: absolute;
	height: 9px;
	width: 1px;
}

.watchBody .hand.longMinute > .darkSide {
	position: absolute;
	left: 0;
	width: 1px;
	display: block;
	border-radius: 40%;
	height: 5px;
	background: #626e76;
	transition: background-color 1s ease;
}

.watchBody .hand.longHour {
	top: 5px;
	left: 2px;
	position: absolute;
	width: calc(100% - 4px);
	height: 1px;
}

.watchBody .hand.longHour > .darkSide {
	position: absolute;
	height: 1px;
	display: inline-block;
	border-radius: 40%;
	right: 0;
	width: 4px;
	background: #626e76;
	
	transition: background-color 1s ease;
}

/* watch running */
.progressWatch.running .watchBody .hand {
	-webkit-animation: rotate 60s infinite linear;
	-moz-animation: rotate 60s infinite linear;
	-ms-animation: rotate 60s infinite linear;
	-o-animation: rotate 60s infinite linear;
	animation: rotate 60s infinite linear;
}

.progressWatch.running .watchBody .hand.longHour {
	-webkit-animation-duration: 6s;
	-moz-animation-duration: 6s;
	-ms-animation-duration: 6s;
	-o-animation-duration: 6s;
	animation-duration: 6s;
}

.progressWatch.running .watchBody .hand.longMinute {
	-webkit-animation-duration: 0.5s;
	-moz-animation-duration: 0.5s;
	-ms-animation-duration: 0.5s;
	-o-animation-duration: 0.5s;
	animation-duration: 0.5s;
}

.progressWatch.running .watchButton {
	border-color: white;
	top: 1px;
}

.progressWatch.running .watchBody {
	border-color: white;
}

.progressWatch.running .watchBody .hand.longHour > .darkSide {
	background-color: white;
}

.progressWatch.running .watchBody .hand.longMinute > .darkSide {
	background-color: white;
}

/* warning */

.progressWatch.warning .watchButton {
	border-color: #d99608;
}

.progressWatch.warning .watchBody {
	border-color: #d99608;
	background-color: #fce1a9;
}

.progressWatch.warning .watchBody .hand.longHour > .darkSide {
	background-color: #d99608;
}

.progressWatch.warning .watchBody .hand.longMinute > .darkSide {
	background-color: #d99608;
}

/* error */

.progressWatch.error .watchButton {
	border-color: #b94a48;
}

.progressWatch.error .watchBody {
	border-color: #b94a48;
	background-color: #EFA1A7;
}

.progressWatch.error .watchBody .hand.longHour > .darkSide {
	background-color: #b94a48;
}

.progressWatch.error .watchBody .hand.longMinute > .darkSide {
	background-color: #b94a48;
}


@-webkit-keyframes rotate {
	0% { -webkit-transform: rotate(0deg);}
	100% { -webkit-transform: rotate(360deg);}
}	

@-moz-keyframes rotate {
	0% { -moz-transform: rotate(0deg);}
	100% { -moz-transform: rotate(360deg);}
}	

@keyframes rotate {
	0% { transform: rotate(0deg);}
	100% { transform: rotate(360deg);}
}

.progressWarning .progressPane_running, .progressWarning .core-sprite-progress {
	border-color: #f0ad4e; 
}

.progressError .progressPane_running, .progressError .core-sprite-progress {
	border-color: #b94a48; 
}

.progressNormal .progressPane_running, .progressNormal .core-sprite-progress {
	border-color: #468847; 
}

.progressPane_running_dialog {
	vertical-align: middle;
	margin: 2px 8px 2px 2px;	
	background-position: 0 0; 
	text-align: right;
	border: 0;
	width: 16px;
	height: 16px;
}

.progressPane_finished_dialog {
	vertical-align: middle;
	background: url(../images/none.png) no-repeat center;  
	width: 16px; height: 16px;
}

.progressPane_empty {
	
}

.notificationShow {
	color: white; 
	background-color: #458500; 
	bottom: 0;
	position: fixed;
	float: left; 
	margin-left: 20%; 
	margin-right: auto; 
	width: 60%; 
	max-height: 1000px; 
	overflow: hidden;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	z-index: 7000; 
	border-top-right-radius: 5px; 
	border-top-left-radius: 5px; 
	border:none;
	transition:bottom 0.7s;
	-webkit-transition: bottom 0.7s;	
	-moz-transition: bottom 0.7s;
	-ms-transition: bottom 0.7s;
	-o-transition: bottom 0.7s;
}
.notificationShow button {
	display: block;
}
.notificationHide {
	color: white; 
	background-color: #458500; 
	bottom: -45px;
	position: fixed;
	text-align:center;
	float: left; 
	margin-left: 20%; 
	margin-right: auto; 
	width: 60%; 
	box-shadow: 0 2px 0 rgba(0,0,0,0.1);
	max-height: 1000px; 
	overflow: hidden;
	padding-left: 5px;
	z-index: 300;
	border-top-right-radius: 5px; 
	border-top-left-radius: 5px; 
	transition:bottom 0.7s;
	-webkit-transition: bottom 0.7s;	
	-moz-transition: bottom 0.7s;
	-ms-transition: bottom 0.7s;
	-o-transition: bottom 0.7s;
}
.notificationHide button {
	display: none;
}

.notifications a {
	color: white;
	text-decoration: underline;
}

.notifications {
	display: inline-block;
	text-align: left; /*initial*/
}

/* Avoid leading/trailing whitespace on Markdown paragraphs */
.notifications p:first-child {
	margin-top: 0;
}
.notifications p:last-child {
	margin-bottom: 0;
}
